Hace tiempo añadíamos una segunda sidebar al blog, los resultados fueron buenos pero en varias ocasiones me han comentado la imposibilidad de personalizar la segunda sidebar de forma que el resultado fuera el mismo que en la primera.
El ejemplo que voy a poner  ha sido realizado en una plantilla Minima, siguiendo los pasos indicados tiempo atrás he añadido una nueva sidebar.
Después he personalizado los títulos.

.sidebar h2{
margin:0px;
color:#fff;
font-size:12px;
font-weight: bold;
background: #86AFB0;
padding: 3px 0px 3px 7px;
border-bottom:6px double #759697;
}

Y añadí color de fondo a la sidebar.

.sidebar {
background:#E2DDCB;
margin: 0px 5px 0px 0px;
padding:6px 13px 6px 13px;
color:#3333;
line-height:1.5em;
}

Explico esto porque es posible conseguir que con los mismos estilos que tenemos para una sidebar la personalización resulte la misma para las dos, eso es posible si en section class añadimos el mismo nombre.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>


<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
También puede ocurrir que preferimos todo lo contrario, que las dos tuvieran diferentes estilos.
Lo que hacemos entonces es buscar y copiar lo siguiente:

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

y pegarlo justo después del código que copiamos.

Haremos unos cambios en este último, vamos a sustituir el texto de "sidebar" por "newsidebar"
Luego buscamos (sin expandir la plantilla) lo siguiente:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Y sustituimos sidebar por newsidebar

<div id='newsidebar-wrapper'>
<b:section class='newsidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Ahora ya podemos trabajar en los estilos que copiamos y posteriormente pegamos y los cambios se mostrarán en la nueva sidebar.


Alexander Dmitrievich

Hola Gem@, viendo por ahi he encontrado esta otra plantilla de diseño magazine.
http://zinmagremedy-btemplates.blogspot.com/

El carrusel de imágenes y el menú desplegable se me hacen buenas ideas, sin mencionar el estilo mag.

Me podrías enseñar a hacer un carrusel de imágenes (con enlaces) y un menú desplegable como el de esta plantilla?

Un saludo

Responder
La Blogueria

Hola Gema, te sigo leyendo, saludos cariñosísismos << :D >>

Responder
Antony

Genial..! Muy bien explicado... :D

Saludos! ;)

Responder
Gem@

Es laborioso pero lo intentaré Soviet :)

yz ¡¡Hola Vane!! que alegría más grande me das ¿pero dónde te metes?

yz Gracias Antony ;)

Responder
Petterjuice

esos codigos donde van?
antes d q y despues de q ?

Responder
Gem@

Petterjuice hay varios códigos, dime lo que deseas hacer y te digo donde añadirlos :)

Responder
Petterjuice

gema! sos una divinidad!
necesito
1) poner fecha a la izquierda de el nombre de la entrada con una imagen de fondo...
2)donde va el nombre de la entrada poner de esas miniimagenes q miden 1 pix ancho y 20 de alto q van en repeat x
3) poner una imagen de fondo en el cuerpo de a entrada
4) poner debajo del banner un script q haga rotan unas imagenes de 120x120 con botoneras a los costados

Responder
Gem@

Petterjuice la fecha ¿te refieres a tipo calendario?
*Para añadir un icono al lado de los títulos
busca:
.post h3 a, .post h3 a:visited, .post h3 strong {
y añades:
background: url(url-de-la-imagen) center left no-repeat;
Con padding la vas ajustando de forma que quede en la misma línea del título
*Aquí puedes ver com oañadir una imagen de fondo en las entradas.

Responder
Petterjuice

parece q algo estoy haciendo mal...
no se q sera estoy averguando q sera...
mientras hacia eso mira lo q encontre...
http://www.cristalab.com/tutoriales/el-modelo-de-caja-de-css-c180l/

no se si podras publicar meterial ajeno en este blog, si pudieras esta bueno q publikes eso... para los news como yo es muy util esto, espero haberte ayudado, estoy a tu disposicion=)
besos gema!
petterjuice

Responder
Gem@

Hola Petterjuice si la página es pública que lo es no hay problema en publicar algo de su contenido, citar la fuente o no del sitio eso ya queda a decisión de cada uno :)
Sobre cajas de contenido te dejo unos ejemplos, la dinámica siempre es la misma, añadir unos estilos en el css y una clase e las entradas para identificar los estilos.

caja 1
caja 2
caja 3

Responder
Petterjuice

gema! disculpame q t moleste tanto peor no me funciono eso de poner la imagen en la parte del titulo de la entrada.. =(

Responder
Gem@

Prueba mejor así:
En .post h3 {
añades:
background: url(url de la imagen) no-repeat;

Responder
Petterjuice

no gema no me funciono lo de la imagen en el titulo de la entrada

la fecha la quiero poner asi
http://greenvalley-btemplates.blogspot.com/

Responder
Gem@

Lo de la fecha puedes verlo aquí ;)
Dime el blog donde estás añadiendo la imagen a los títulos para ver el problema.

Responder
Anónimo

Hola, mi nombre es Raul. baje una plantilla que se llama greenvalley pero no he podido configurar la fecha, me sale agosto. Como hago para arreglar la fecha.. he entrado por configuracion y nada. Gracias, por fvor responder a email: avecesllegancartas@yahoo.com

Muy bueno tu blot

Responder
Gem@

La respuesta es en Configuración | Formato, también puedes mirar en Plantilla de diseño | entradas del blog Editar allí escoges Seleccionar elementos ;)
Aquí debajo del formulario está la suscripción para suscribirse por correo, eso no implica registro alguno sino que recibes las actualización de respuesta en tu mail :)

Responder
KoRnie

hola! gracias x la ayuda, eres de muxisima utilidad xa todos los q andamos perdidos!
A mi me gustaría preguntarte, como podria hacer xa poner de fondo de la sidebar (solo tengo una) una imagen? gracias de antemano

Responder
Gem@

yz Hola KoRnie gracias por el comentarios, verás esa imagen de fondo la puedes añadir en:
#sidebar-wrapper de esta forma:

#sidebar-wrapper {
background: url(aquí la url de la imagen);
aquí el resto de estilos que ya tienes
}

Responder
test

Infinitas gracias por tus excelente ejemplos. Mi blog es http://itr83.blogspot.com/.
Millon de gracias Gem@!!

Leonel Jimenez

Responder
Gem@

yz Gracias Leonel Jimenez, me encantó conocer tu blog en especial ese vídeo sobre el "Padre Coró" lo encontré muy humano y gracioso al mismo tiempo.

Responder
Usuario10

Hola gema,
Aplique el fondo de la sidebar del mismo color de la main-wrapper (blanco) el problema que tengo es que tengo fondo negro y no me quedan ambas alineadas, como la sidebar es mas corta que la main-wrapper se ve mal por que no alcanza a rellenar al mismo nivel.

Si gustas darle una miradita mi direccion es http://tigremen.blogspot.com/

¡Saludos!

Responder
Gem@

yz Hola Tigremen, si quieres que el blanco llegue al final prueba a añadirlo en outer-wrapper.
Si no es ese el resultado que deseas házmelo saber ;)

Responder
Usuario10

Gracias Gem@ ahi estaba el asunto, gracias por tu ayuda.

Responder
Gem@

yz Me alegra que esté resuelto Tigremen ;)

Responder
ana

Hola Gema me ayudaste muchisimo con los colores de los enlaces del blog, pero eso afecto tambien a los enlaces de la sidebar, antes, al dar a un links de la sidebar no pasaba nada, pero ahora al dar a un link de la sidebar el color del links se vuelve a un verde más intenso y me gustaria poder variar eso. Elegir los colores de los enlaces de la sidebar por favor.

Color del link
Al pasar el ratón y
Enlace visitado

Y bueno si no es mucho pedir me gustaría que de paso afectase a las dos sidebar a la vez.

Responder
Gem@

yz Pásame la url del blog Ana no recuerdo donde dejamos los últimos comentarios :)

Responder
ana

Esta es la URL: http://pruebadqq.blogspot.com/

FIjate en el menú de la izquierda, el expandible, que al dar a un enlace e verde se hace más intenso y que al pasar el raton se vuelve morado. pero en los enlaces de la izquierda ese efecto no se hace. Muchas gracias por ayudarme

Responder
Gem@

yz Los enlaces de todo el blog se configuran como lo tienes anteriormente.
Si queremos unos colores distintos entonces configuramos también los de esa parte en concreto que es como tu lo tienes ahora, los de la sidebar los tienes definidos así:

#sidebar a:link {
color:#38B63C;
text-decoration:none;
}
#sidebar a:active {
color:#ff0000;
text-decoration:none;
}
#sidebar a:visited {
color:sidebarlinkcolor;
text-decoration:none;
}
#sidebar a:hover {
color:#800080;
text-decoration:none;
}

Si eliminas esa parte se mostrarán en todo el blog como los tienes en body, puedes probar eliminando esos estilos, si vieras que aún así sigue mostrando el mismo color entonces puedes probar a dejarlo como está pero cambiando los colores ;)

He visto con Firefox que la sidebar izquierda la tienes desplazada al fondo, creo que es la nube de etiquetas que ocupa más espacio del que dispones. Si puedes compruébalo tu misma ;)

Responder
ana

Gracias Gema me has ayudado muchisimo de verdad. Sin ti mi blog estaría patas arriba

Y con lo que me dices de la sidebar, ya se que le pasa eso, pero es por la resolución de la pantalla o el tamaño de la ventana con la que veas la página. Pero no pasa nada ;)

Responder
ana

Pero se te ocurreo alguna forma de evitar que se baje hasta el final la sidebar, a parte de hacer mñas pequeña la nube, claro

Responder
ana
Este comentario ha sido eliminado por el autor.
Responder
ana

Acabo de quitar la nube y solo deje una cosa a ver si era la nube la que hacia que al hacer la ventana más pequeña se baje la sidebar, y no, no era la nube porque ya no esta y la sidebar sigue bajandose.


La otra sidebar se adapta, va moviendo los objetos segun hago más pequeña la ventana pero no se baja, en cambio la otra si, y en ambas sidebars hay el mismo contenido

Responder
ana

uii Gema ahora si que me preocupa poruq alomejor más gente como tu lo ve bajado y no mola, crei que hacia falta hacer la ventana un tanto pequeña para que se bajara pero lo he comprobado y a la minima de encoger la ventana se baja y es un horror, ayuda please :(

Responder
Gem@

yz Ana yo sigo pensando que son los gadgets de la sidebar, no sólo la nube sino de publicidad que tienes añadida.
Si te fijas con Explorer la nube no se ve pero con Firefox la nube coge espacio del main.
La solución si no adaptas los gadgets a la medida de la sidebar no es quitar anchura a la sidebar sino darle anchura, pero si le das anchura también hay que dársela a content-wrapper y a outer-wrapper que son los contenedores de todo el blog.

Responder
ana

y donde se modifica la anchura? padding?

Responder
ana

aaah por cierto la nube yo si la veo con explorer y es más puedo incluso reducir la ventana bastante y no se baja, pero llegado a un punto si que se baja y molesta mucho.

Responder
ana

una cosita más, eso de la publicidad, es exactamente el mismo codigo el que esta puesto a la derecha, soloq ue el de la derecha se va a adaptando y el otro decide bajarse, la nube la he hecho mas pequeñita para descartarla

Responder
ana
Este comentario ha sido eliminado por el autor.
Responder
ana

Gema creo que ya se porque pasa eso,pero no estoy muy segura, la sidebar de la derecha como que tiene un margen que separa la linea divisoria derecha con la sidebar de la derecha, pero la linea divisoria izquierda carece de dicho margen, me podrias ddecir como añadir un margen entre la line divisoria izquierda y la sidebar izquierda, por favor? Pero me refiero a margenes inmoviles, no solamente aumentar espacio. Gracias

Responder
ana

Creo que lo solucione el problema, puedes decirme si tu ya lo ves bien?

Responder
Gem@

yz Ahora perfecta Ana, viendo tu plantilla ahora me he dado cuenta que es de tipo fluido y si podía reducirse la sidebar.
Me alegra lo solucionaras ;)

Responder
4EverMadonna

hola gema!! encontre tu blog y me parecio genial!! el problema es que quiero añadir otra sidebar en la plantilla Denin de Darren Delaye y no se como me podrias ayudar con los codigos y todo eso... mil gracias!!! podes entrar en mi blog y dejar un mensaje en "contactos" http://4evermadonna.blogspot.com mil gracias!!!! de nuevo!!!! ;)

Responder
Gem@

yz Al parecer llego tarde 4everMdnna veo que tienes la sidebar añadida :)

Responder
4EverMadonna

gracias de todos modos gem@, tu post me ayudo a seguir buscando y lo logre muchas gracias!! cualquier otra duda vuelvo con vos...

Responder
Gem@

yz Gracias a ti por comentar 4everMdnna :)

Responder
Gem@

yz RyuiChi elimina eso que tienes de:
.even {
background-color: #ffffff;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border: dotted #FFD4D8 5px;
}
.odd {
background-color: #ffffff;
-moz-border-radius: 14px;
-webkit-border-radius: 15px;
border: dotted #FFD4D8 5px;
}
y añade en .sidebar lo que está en negrita.

.sidebar {
color: #FEACB5;
line-height: 1.5em;
border: dotted #FFD4D8 5px;
background-color: #ffffff;
-moz-border-radius: 15px;

}

Ya me dices si así resulta ;)

Responder
Madonna México

hola Gema tengo un problemas con mi blogger solo quiero cambiarle el fondo a un solo sidebar.. http://rmmexico.blogspot.com/ este es miblog quiero cambiar el fondo negro por una imagen t ante mano t mando las gracias

Responder
Gem@

yz La imagen de tu sidebar se encuentra en:
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 862px;
text-align: left;
background: #000000 url(http://www.blogblog.com/moto_mr/innerwrap.gif) top right repeat-y;
font: normal normal 100% 'tahoma Trebuchet MS', lucida, helvetica, sans-serif;
}
Radio Madonna México puedes sustituir la url http://www.blogblog.com/moto_mr/innerwrap.gif por la de tu nueva imagen ;)

Responder
Autonomia

vaya, acabo de encontrar la respuesta a mi pregunta!

Ahora mis dos sidebar estan iguales! muchas gracias por tu blog, esta estupendo...

Responder
Gem@

yz Me alegra lo resolvieras Autonomia :D

Responder
Gustavo

Hola gem@:
Mi blog es www.lospingosdetodos.blogspot.com Necesito que la sidebar izquierda de mi blog quede como está y ensanchar sólo la columna del lado derecho. ¿Es posible hacerlo o siempre se ensanchan las dos al mismo tiempo?
Gracias por tu ayuda.

Responder
Gem@

yz Hay dos soluciones para eso Gustavo, ese espacio extra que necesitas para la sidebar derecha hay que sacarlo de algún sitio, una solución sería restarle donde dice:
#main-wrap1 {
width:495px;
(es el espacio central, si lo disminuyes puedes aumentar la misma cantidad que quitas a la sidebar derecha)
Ocurre que quedaría muy poco espacio para los post, y al tratarse de imágenes de fondo se vería alterada la imagen, así que también es posible y casi menos trabajo aumentar el ancho total del blog en:
#outer-wrapper {
width:1000px;
(si ahí aumentas por ejemplo en width:1100px; esa diferencia de 100px es lo que puedes aumentar a la sidebar derecha, es cuestión de probar y mirar en vista previa. Pero antes haz una copia de respaldo para evitar sustos innecesario ;)

Responder
gustavo

Gracias Gem@ por responder tan rápido. Mi idea es agrandar la plantilla como sugieres pero lo que me gustaría es modificar el ancho de SOLO UNA de la sidebars(no de las dos al mismo tiempo). ¿Se puede?

Responder
Gem@

yz Hola Gustavo, la sidebar que se agranda es solamente la que aumentamos su ancho.
Si aumentamos en outer-wrapper estamos dando más ancho a la totalidad del blog, es como si agrandáramos la caja que contiene todo el contenido. Una vez agrandamos esa caja nos quedará más espacio para distribuir el contenido y es entonces cuando decidimos qué espacio es el que podemos dar esa anchura extra, en este caso la sidebar derecha pero la otra quedará intacta porque no tocamos las medidas :)

Responder
Lopecito

Esto aparece en mi blog Gem@.
No hay (o no encuentro) en mi plantilla dos sidebars sino que modificando sidebar-wrap modifico las dos juntas. Disculpa la insistencia y gracias por todo.

#outer-wrapper {
width:1000px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:495px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
margin:0px 0px 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y;
padding:0;
}
.sidebar-wrap {
width:235px;
float:left;
margin:0px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

Responder
Gustavo

Avril y Lopecito soy yo...

Responder
Gem@

yz Hola Gustavo, me gustaría probar a hacer ese cambio antes de decirte donde hay que modificar las medidas pero ahora no tengo tiempo, si te parece mándame la plantilla a mi correo y mañana la miro ¿ok?

Responder
gustavo

Gem@:
Te envié un mail como me lo solicitaste. En cuanto tengas tiempo espero me puedas dedicar unas lineas. Muchisimas gracias

Responder
Gem@

yz Ya lo tengo Gustavo, voy a añadirla a mi blog de pruebas ;)

Responder
EmmaX

hola a todos, una consulta, en mi blog tengo varias listas de enlaces en ambas sidebars, y hace poco los links de ambas listas se han centrado y yo las keria hacia la izquierda. Podrias ver que puede ser? este es mi blog:

http://itaka-music.blogspot.com/

Responder
Gem@

yz Saludos EmmaX, aunque tarde ahí va mi respuesta.
Busca:
.sidebar ul {
list-style:none;
margin: 0px
padding: 0px;
}
.sidebar li {
margin: 1px;
padding-top: 0px;
padding-right: 0px;
padding-bottom:.25em;
padding-left: 0px;
text-indent:-15px;
line-height:1.5em;
}

y sustitúyelo por:

.sidebar ul {
list-style: none;
margin: 0;
padding-left: 5px;
}
.sidebar li {
font-size: 11px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0 10px;
}

Mira en vista previa y veamos como queda ;)
.sidebar li a:hover {color: #940f04;}

Responder
EmmaX

Gem@ pense que me habias solucioado el problema pero sigue igual. Te agradeceria muchisimo si me dieras otra opcion, pero desde ya muchas gracias por haber respondido

Responder
EmmaX

ya lo solucione. gracias igual. saludos

Responder
Anónimo

Buenísimo. Gracias.

Responder
Gem@

yz Gracias Anónimo.

yz Siento no haber sido de más ayuda EmmaX :(

Responder
Anónimo

hola que tal gema tengo un problema con la columna de la izquiera como hago para darle margen con la parte central ....
y para hacerle los menus deslizables como en este blog http://zinmagremedy-btemplates.blogspot.com/..

el mio es http://eeruttaa.blogspot.com/

Responder
Gem@

yz eeRuttaa no veo en tu blog la sidebar izquierda, tendría que verla añadida.
Para crear un menú como en ese ejemplo puedes ver algo en el blog de http://vagabundia.blogspot.com/ no recuerdo la entrada que era pero el resultado es similar ;)

Responder
Jose

Hola Gem@. De nuevo por aquí para hacerte una consulta. En mi nuevo blog, Quintolandia, puse un fondo para la sidebar y otro para el main, pero el problema me viene porque ahora veo demasiado espacio entre los gadgets de la sidebar. No es que haga horrible del todo pero querría disminuir esos espacios y no consigo dar con el código que debo cambiar(si es que se puede). Si puedo hacerlo, hazme el favor de decirme cómo, vale?
Besitos

Responder
Gem@

:: Hola Jose :)
Busca lo siguiente, son los estilos de los gadgets.
.sidebar .widget {
background: url(http://2.bp.blogspot.com/_H9CxIBNm_0k/SuJJYoXDYgI/AAAAAAAABLE/cQQsjzkt-2Y/s400/Postal-infantilfondo.gif);
border-bottom:0px dotted #000000;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

En margin:0 0 1.5em; es el espacio entre el gadget y su entorno, el primer valor 0 es el espacio de arriba y de abajo admite valores negativos así que puedes intentar a poner en lugar de 0 por ejemplo -5

margin:-1.1em 0 1.5em;
(si aumentas o disminuyes el cinco verás la diferencia en vista previa) :D

Responder
Gem@

:: Me confundí al final Jose te decía que probaras -5 pero lo vi muy junto por eso más abajo te puse lo qu eyo vi que quedaría mejor:
margin:-1.1em 0 1.5em;

Responder
Jose

Muchas gracias, Gem@. Voy a probarlo. es que el tema este de los márgenes... y sobre todo lo del em, que no acabo de saber lo que es. Ya te diré qué tal ha ido. Pasa un buen finde. Besos.

Responder
Gem@

:: Jose puedes sustituir em por px son unidades relativas em, ex, px
Te dejo una %% tabla para que veas las equivalencias ;)

Responder
Jose

Gracias de nuevo, Gem@. Ahora ya tengo las equivalencis más claras, lo que tendré que ir distinguiendo poco a poco es en qué elemento concreto debo cambiar las medidas para dar márgenes donde quiero. No sé si me explico, porque estoy de un espeso...
Por ejemplo en los comentarios, quiero dar un poco más de margen donde salen los iconos de quienes comentamos,para que la foto no salga pegada al borde, pero hija, no hay forma. Y claro, no me vale lo de hacer vista previa, porque he de ir al post y clicar en comentarios. Una odisea, vamos,jeje.
Besitos.

Responder
Gem@

:: Hola Jose, yo creo que al avatar lo que le falta es añadirle unos estilos, mira la siguiente %% entrada a partir de donde dice "No hay que hacer un drama, se solucionará al añadir los estilos"
Cualquier duda me haces saber ;)

Responder
Jebú

¡Hola! :) Creo que he logrado crear la sidebar izquierda en mi Blog, por que ahora hay un mayor espacio a la izquierda, el área central se ha reducido y la derecha también está más estrecha.

Me he confundido con eso de "cambiar los colores" de las sidebar, pero ese no es el problema central. Sino, que ahora no sé cómo distribuír las cosas entre las dos sidebar. ¿Dónde tendría que dirigirme para ver eso?. Si voy a Personalizar, Elementos de la página y Añadir y organizar elementos de la página e intento trasladar los elementos hacia la izquierda, no me lo permite.

¿Podrías decirme qué hice mal?.

Sino te envío mi plantilla y me la corregís... :$

Gracias. Seguiré viendo qué puede ser de utilidad en tu Blog...

¡Abrazo! :P

Jebú.

Responder
Gem@

:: Hola Jebú, intenta editar los gadgets de uno en uno copiando el contenido y engándolo en los nuevos gadgets veremos si resulta :)

Responder
Anónimo

HOla Gema, la verdad que muchas gracias por tu labor. Tienes un blog magnífico, tanto en diseño como en contenido.
Ahora, con tu permiso te voy a comentar mi problema, me sale la segunda sidebar, pero no lobro que me salga una a cada exremo, que es lo que llevo intentando hace muuuchos dias ;). Me sale la sidebar nueva al lado de la que ya tengo, y si cambio izq o dcha, se intercambian entre las mismas sidebares, pero no al lado contrario. ¿Que puedo estar haciendo mal?

Muchas gracias por tu ayuda. ;) muchos besos.

Responder
Anónimo

Hola Gema, ;)
Bueno, he seguido intentando desde ayer, y lo único que consigo es que me queden los dos sidebares juntos. Me quedan o los des a la derecha o los dos a la izquierda, ponga lo que ponga. Besitos. Que tenga un buen dia ;)

Responder
Gem@

:: Damita con float: left añadimos la sidebar a la izquierda y con float: right a la derecha.
Mira esta entrada:
http://gemablog-.blogspot.com/2007/04/aadir-sidebar.html

Responder
Anónimo

Hola Gema,
muchas gracias por tu atención. Me he leido los dos post, tanto para crear la sidebar, como para modificarla. No he guardado los cambios, porque no he conseguido hacer lo que intento.
La sidebar nueva, se crea, lo del espacio, lo tengo controlado, y le doy a cada cosa el que le corresponde. El problema, es que no logro que me quede la sidebar una a cada extremo, le ponga el valor que le ponga. juego con los valores "float", de la columna principal y de las 2 sidebares, y utilice la combinacion que utilice, las dos sidebares me quedan juntas a un lado o al otro de la columna central, si pngo el valor de derecha o de izquierda a las sidebares, se pone una a la derecha y otra a la izquierda entre las mismas sidebares, pero siempre juntas. He cambiado el valor a la columna principal y me pasa lo mismo,se me modifica la posicion de las sidebares, pero siempre respecto una a la otra.

Gracias nuevamente por tu tiempo.

Un gran saludo.

Responder
Gem@

:: Damita si quieres añade esos cambios a un blog de pruebas porque sin verlos guardados no sé donde está el problema :(

Responder
Anónimo

Buenas noches Gema, perdona por la pesadez :$

Ya he aplicado los cambios a mi blog. Me pasa lo mismo, o a un lado o al otro de la columna principal, pero siempre juntas las sidebares, ya ponga derecha o izquierda.

Muchas gracias, y disculpa la molestia.

Un saludo.

Responder
Gem@

:: No te preocupes Damita, probando es la única forma de solucionarlo, sin embargo no veo más que dos columnas la central y una sidebar ¿añadiste algo a la nueva sidebar??? porque no la veo :S

Responder
Gem@

:: Haz una cosa arrastra un gadget de los que tienes a la nueva sidebar y dime que gadget es el que has puesto.

Responder
Anónimo

Gema, te he mandado un correo con el pedacito que modifiqué en la plantilla, porque me da error de blogger al publicar un comentario, no se si será porque pegué el trozo que modifiqué.

Seguí tus pasos, entré en diseño para arrastrar un gadget a la sidebar nueva, y me llevé una sorpresa :'( no tengo sidebar nueva. Está solo el espacio, donde debería de ir, al modifiar los tamaños, pero solo eso, el espacio. Ahora si que estoy perdida de verdad.

Un saludo. GRACIAS.

Responder
Anónimo

Bueno, revisando la plantilla, me di cuenta de que no puse "NEW"sidebar. Lo he rectificado, pero aún asi, no me sale la 2 sidebar. Gracias. Besos.

#main-wrapper {
width: 600px;
margin-left: 20px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 250px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

Responder
Anónimo

Huysss,, te estoy dando mucho la paliza.:$
Ahora si que tengo la segunda sidebar, y ahora si tengo el primer problema, por el cual contacté ;) Pongo en mi segunda sidebar, tu enlace ;) Juego con los valores derecha e izquierda, incluso le puse a la columna central "center", pero nada de nada, cambian de sitio entre las sidebares, pero no respecto a la columna central, quedan las dos juntas a la izquierda o las dos juntas a la derecha. Espero esta vez, no molestarte mas ;) Un gran abrazo y beso.

Responder
Gem@

:: Veamos, he repasado los estilos que tienes y he probado con los siguientes viendo tu plantilla.
Prueba de este modo:
#main-wrapper {
float: left;
......

#sidebar-wrapper {
float:right;
......

#newsidebar-wrapper {
float: left;
.......

Luego el bloque de la nueva sidebar "newsidebar-wrapper" lo añades justo encima de
<div id='main-wrapper'>
------
</div>

Quedaría más o menos así:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
-------
-------
</b:section>
</div>


<div id='main-wrapper'>
------
------
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
-------
-------
</b:section>
</div>

Responder
Anónimo

Gema, ya lo he hecho. ;) Por fin, he conseguido el resultado que andaba buscando.

Muchisimas gracias por tu ayuda, por tu tiempo y por tu dedicación. GRACIAS!!!

Un fuerte abrazo y gran beso.

Responder
Gem@

:: Estupendo Damita, me alegra mucho el resultado :D

Responder
Anónimo

Gracias Gema, desde luego que todo fue gracias a tu ayuda ;)

Haces una magnífica labor. MIL GRACIAS.

Besitos.

Responder
Maty

Ufff, Gema, buenas tardes, yo estoy apunto de "tirarme de los pelos", con las plantillas estas del editor. He solucionado, con muchas cosas que he encontrado en tu blog, y poniéndolas en "añadir CSS", muchisimos problemillas que me han surgido. La verdad, que muchas gracias. Solo me falta hacer algo, para que me quede el blog mas o menos como quiero. En el editor, puedes modificar el ancho del blog, pero de máximo te da 1000px, y yo quiero, que me ocupe mas espacio, porque las dos columnas roban muchisimo, y la central que es de las entradas, no me gusta tan pequeñita. ¿Por casualidad sabes como puedo modificar esto? Es que en las otras eran muy fáciles, con estas plantillas no, y probando, probando, probando, he hecho cada desastre... ;) Podría pegar un código CSS, que me modificara la columna central, y las sidebares? He comprobado, que pegando "pedaciotos" de las plantillas antiguas, se puede modificar, pero es que no encuentro los códigos para hacer estas modificaciones. Si puedes ayudarme amiga, te lo agradezco. La verdad, que la dedicación que nos das a tus lectores, no te lo pagaríamos ni con todo el oro del mundo. Gracias de nuevo ;).
Besos

Responder
Gem@

:: Maty no puedo responder a tu pregunta si podrías copiar y pegar de una plantilla a otra porque hay que saber que código sustituye a otro y no estoy familiarizada con esas plantillas.
Como te dije en otro comentario no son plantillas que se presten a ser modificadas, siempre es mucho mejor trabajar sobre una plantilla que nos resulte familiar :S

Responder
Maty

huyss, pues si. Me voy a dar un poco de tiempo mas, a ver si consigo algo ;) . Gracias. Ya te cuento ;) a ver si tengo suerte. Muchas gracias.

Responder
Gem@

:: Entonces suerte y paciencia Maty lo vas a necesitar ;)

Responder
Maty

Hola Gema, buenas noches ;)

No tengo mucha paciencia...

Logre pequeñas cosas, pero que va, me niego a seguir perdiendo el tiempo con el "super editor" y sus "super plantillas". Me pasé a las clásicas.... Ahora, a comenzar... Seguro que en unas horas que le dedique, lo dejo exactamente como quiero ;)

Besos

Responder
Gem@

:: Buena decisión :)

Responder
Maty

Uff, si, aunque me dio algo de problemas poner otra columna, es lo mejor que he hehco. Las nuevas estan bien, para si no quieres molestarte mucho, pero yo soy algo inconformista.....

Me alegro haberme metido en este post, aunque no había logrado solucionar la sidebar, me dio curiosidad mirar como se podia añadir estilos, lo he mirado, y encontré la solución a lo que andaba buscando.

He hecho al pie de la letra, la respuesta que le has dado a Damita, ya que teníamos el mismo problema, y listo, ya tengo una sidebar a cada lado.

Muchas gracias.
Un saludo.

Responder
Gem@

:: Genial, entonces era eso por lo que no te salía :) Siempre digo que en los comentarios muchas veces encontramos respuestas a nuestras dudas y es verdad :D

Responder
Maty

Jajajajajaja, pues si, yo siempre los miro, pero claro, aún no había logrado colocar bien las columnas y no se me había ocurrido mirar modificarla :D . Muchas gracias por todas tus respuestas y ayuda. Con tu permiso ;) te enlacé en mi blog. Besos.

Responder
Gem@

:: Todo el permiso del mundo Maty :D

Responder
Cêz

Hola Gem@, he leido la mayoría de los comentarios en busca de algún código lo mas parecido al mio de la dos sidebars, podría decir que si, sin embargo, a la hora de copiar unos códigos de la plantilla WP Boxet Tech guiándome con tu entrada:

http://btemplates.com/2009/blogger-template-wp-boxed-tech/demo/

porque sus sidebars me han encantado y quisiera implementarlas en mi blog, su estilo, color, lineas y el fondito de cada título y me ha salido chueco, -literalmente- , tengo solución para ello y poder imitar el estilo de la plantilla antes mencionada en la mia? :'(

Mi blog
http://asicious.blogspot.com/

Responder
Gem@

:: Céz yo veo que está bastante conseguido quizás si añades el título de la siguiente forma...
Busca:
.sidebar h2{
background-image: url(-);
}

Y lo sustituyes por:

.sidebar h2{
background: url("url-imagen") no-repeat scroll right center transparent;
color: #333333;
float: left;
font-size: 11px;
letter-spacing: 1px;
margin: 0 0 10px;
padding: 0 14px 0 0;
text-transform: uppercase;
}

Quizás se vea distinto en la tuya porque esa plantilla tiene color en
#outer-wrapper {
background:#F1F1F1;
....

Recuerda que es conveniente que añadas tus propias imágenes porque si el autor las elimina desaparecen ;)

Responder
Cêz
Este comentario ha sido eliminado por el autor.
Responder
Cêz

Wow!! cada vez se esta pareciendo mi plantilla Mínima a la de WP Boxed Tech!

Sabes, Gema? he intentado ponerle un border-bottom de 1px y color gris claro debajo de cada título de las 2 sidebars, sin embargo, no me sale!!! quizás no sé en donde debería acomodar correctamente.

A0demás me gustaría darle mas espacio entre el título y contenido o cuerpo de cada sidebar (los veo muy pegaditos como una pareja empalagosa jeje) Alguna solución?

También en parte de plantilla puedo colocar una imagen de flechita a cada parte de mi archivo (entradas) de cada mes y año.

Por cierto, correguí el ancho de cada sidebar a 220px pero la widebar esta ahí muy rebelde porque no se quiere ir a la derecha y encima de las dos sidebars, cómo debo resolverlo?

Muchas gracias, tengo mi cuenta Photobucket para las imagenes desde hace tiempo, me la recomendo Rosa (QEPD)

Deseo que tengas un excelente día y un fuerte abrazo.

Responder
Gem@

:: El borde lo puedes añadir en:
.sidebar h2 {
border-bottom: 1px solid #ccc;
aquí el resto de código...

Para dejar más espacio puede hacerse individualmente,para los archivos:
#ArchiveList {
text-align: left;
margin-top: 30px;
}

Para el perfil:
.profile-data {
padding-top: 25px;
aquí el resto de código...

Y para la flechita eso será un icono o bullet puedes ver esta entrada de Rosa:
http://elescaparatederosa.blogspot.com/2008/06/iconos-en-el-elemento-de-archivos.html

Y por si te interesa para las flechitas de las listas puedes añadir:

.sidebar ul {
border-top: 1px solid #F1F1F1;
font-size: 11px;
list-style: none outside none;
margin: 0 -15px -15px;
padding: 0;
width: 198px;
}
.sidebar li {
background: url("url-imagen") no-repeat scroll 16px 16px transparent;
border-bottom: 1px solid #F1F1F1;
margin: 0;
padding: 8px 25px;
}
.sidebar li:hover, .sidebar li:active, .sidebar li:focus {
background: url("url-imagen-efecto-hover") no-repeat scroll 16px 16px #F7F7F7;
border-bottom: 1px solid #F1F1F1;
margin: 0;
padding: 8px 25px;
}
.sidebar li a {
color: #333333;
text-decoration: none;
}
.sidebar li a:hover, .sidebar li a:active, .sidebar li a:focus {
color: #CC0000;
text-decoration: none;
}

Responder
Cêz
Este comentario ha sido eliminado por el autor.
Responder
Gem@

:: Céz no está, prueba a añadirlo ;)

Responder
Cêz

Dios mío! parece que Blogger y yo tenemos una relación de amor y odio, le añadí unos codigos con cariño y zas! el resultado sale distinto a lo esperado como si mi plantilla me odiara! debo ser culpable si algo falla, jejeje.
Lo bueno es que, mediante tu ayuda, pude darle espacio a cada título de mis 2 sidebars y cambiar los iconos ▼ y ► por los mios, (incluso los eliminé de acuerdo a
http://elescaparatederosa.blogspot.com/2007/10/eliminar-o-sustituir-el-de-los-archivos.html)
lo raro es que al darle click en la lista y aparece con los originales, es decir, del bloger :O!, a qué se debe eso?
Otra cosa, he investigado en tu blog acerca de efecto hover (nunca lo habia escuchado) y entiendo que es algo que cambia al pasarle el puntero y tengo que buscar una imagen de mi primer icono pero en otro color, cierto?

Muchas gracias por ayudar a ese pobre muchacho con cerebro lleno de teflón!!! :$

Responder
Gem@

:: Veamos... ve a plantilla y marca para expandirla.
Busca lo siguiente:

<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;&#160;
<b:else/>
&#9658;&#160;
</b:if>
</span>

Ahí puedes modificar las flechas que Blogger añade por defecto, sustituyendo &#9668;&#160; por la imagen.
La que hay encima de <b:else/> es la horizontal y la que hay debajo la vertical.

Responder
Cêz

Muchas gracias por la ayuda! me he dado cuenta que Blogger no deja a nosotros modificar todo a nuestro antojo, quizás lo hace por seguridad.

Un abrazo desde México

Responder
Gem@

:: Np estés tan seguro nigrites mucho que te pueden oír Céz :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top